<template>
  <div class="register-container">
    <!-- header部分 -->
    <header class="page-header">
      <p>用户注册</p>
    </header>

    <!-- 表单区域 -->
    <div class="form-section">
      <div class="form-card">
        <div class="form-header">
          <h2>创建新账户</h2>
          <p>请填写以下信息完成注册</p>
        </div>

        <div class="form-content">
          <div class="input-group">
            <label>手机号码</label>
            <div class="input-wrapper">
              <i class="fa fa-phone"></i>
              <input v-model="form.phone" type="text" placeholder="请输入手机号码">
            </div>
          </div>

          <div class="input-group">
            <label>密码</label>
            <div class="input-wrapper">
              <i class="fa fa-lock"></i>
              <input v-model="form.password" type="password" placeholder="请设置密码">
            </div>
          </div>

          <div class="input-group">
            <label>确认密码</label>
            <div class="input-wrapper">
              <i class="fa fa-lock"></i>
              <input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码">
            </div>
          </div>

          <div class="input-group">
            <label>用户姓名</label>
            <div class="input-wrapper">
              <i class="fa fa-user"></i>
              <input v-model="form.name" type="text" placeholder="请输入姓名">
            </div>
          </div>

          <div class="input-group">
            <label>性别</label>
            <div class="radio-group">
              <label class="radio-item">
                <input v-model="form.gender" type="radio" value="male" name="sex">
                <span class="radio-custom"></span>
                <span class="radio-label">男</span>
              </label>
              <label class="radio-item">
                <input v-model="form.gender" type="radio" value="female" name="sex">
                <span class="radio-custom"></span>
                <span class="radio-label">女</span>
              </label>
            </div>
          </div>

          <button class="register-btn" @click="handleRegister">
            注册账户
          </button>

          <div class="login-link">
            已有账户？<router-link to="/login">立即登录</router-link>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'
import Footer from '../components/Footer.vue'

export default defineComponent({
  name: 'Register',
  components: {
    Footer
  },
  setup() {
    const router = useRouter()

    const form = reactive({
      phone: '',
      password: '',
      confirmPassword: '',
      name: '',
      gender: 'male'
    })

    const handleRegister = () => {
      if (!form.phone || !form.password || !form.name) {
        alert('请填写完整信息')
        return
      }

      if (form.password !== form.confirmPassword) {
        alert('密码和确认密码不匹配')
        return
      }

      console.log('注册信息:', form)
      alert('注册成功！')
      router.push('/login')
    }

    return {
      form,
      handleRegister
    }
  }
})
</script>

<style scoped>
/* 总容器 */
.register-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  padding-bottom: 16vw;
}

/* 页面头部 */
.page-header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: white;
  font-size: 4.8vw;
  font-weight: 600;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 表单区域 */
.form-section {
  margin-top: 16vw;
  padding: 4vw;
}

.form-card {
  background: white;
  border-radius: 4vw;
  padding: 6vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.form-header {
  text-align: center;
  margin-bottom: 6vw;
}

.form-header h2 {
  font-size: 5.5vw;
  color: #333;
  margin: 0 0 2vw 0;
  font-weight: 600;
}

.form-header p {
  font-size: 3.2vw;
  color: #666;
  margin: 0;
}

/* 输入组 */
.input-group {
  margin-bottom: 5vw;
}

.input-group label {
  display: block;
  font-size: 3.5vw;
  color: #333;
  margin-bottom: 2vw;
  font-weight: 600;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 2.5vw;
  padding: 3.5vw 4vw;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  border-color: #0097FF;
  background: white;
  box-shadow: 0 0 0 0.5vw rgba(0, 151, 255, 0.1);
}

.input-wrapper i {
  color: #666;
  font-size: 4vw;
  margin-right: 3vw;
  transition: color 0.3s ease;
}

.input-wrapper:focus-within i {
  color: #0097FF;
}

.input-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 3.5vw;
  color: #333;
}

.input-wrapper input::placeholder {
  color: #999;
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  gap: 6vw;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 3.5vw;
  color: #333;
}

.radio-item input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 4vw;
  height: 4vw;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 2vw;
  position: relative;
  transition: all 0.3s ease;
}

.radio-custom::after {
  content: '';
  width: 2vw;
  height: 2vw;
  background: #0097FF;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}

.radio-item input[type="radio"]:checked + .radio-custom {
  border-color: #0097FF;
}

.radio-item input[type="radio"]:checked + .radio-custom::after {
  transform: translate(-50%, -50%) scale(1);
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  height: 12vw;
  background: linear-gradient(135deg, #0097FF 0%, #00D4FF 100%);
  color: white;
  border: none;
  border-radius: 3vw;
  font-size: 4.2vw;
  font-weight: 600;
  cursor: pointer;
  margin-top: 2vw;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 151, 255, 0.3);
}

.register-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 151, 255, 0.3);
}

/* 登录链接 */
.login-link {
  text-align: center;
  margin-top: 4vw;
  font-size: 3.2vw;
  color: #666;
}

.login-link a {
  color: #0097FF;
  text-decoration: none;
  font-weight: 600;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .form-card {
    padding: 5vw;
  }
  
  .form-header h2 {
    font-size: 5vw;
  }
}
</style>